import E from 'wangeditor' 
const {
    $,
    BtnMenu,
    DropListMenu,
    PanelMenu,
    DropList,
    Panel,
    Tooltip
} = E




function createShowHideFn(editor) {
    let tooltip = Tooltip | null
    /**
     * 显示 tooltip
     * @param $link 链接元素
     */
    function showImageExtendsTooltip($node) {

        const conf = [{
                $elem: $("<span class='w-e-icon-trash-o'></span>"),
                onClick: (editor, $node) => {
                    // 选中img元素
                    editor.selection.createRangeByElem($node)
                    editor.selection.restoreSelection()
                    editor.cmd.do('delete')
                    // 返回 true，表示执行完之后，隐藏 tooltip。否则不隐藏。
                    return true
                },
            },
            {
                $elem: $('<span>30%</span>'),
                onClick: (editor, $node) => {
                    $node.attr('width', '30%')
                    $node.removeAttr('height')

                    // 返回 true，表示执行完之后，隐藏 tooltip。否则不隐藏。
                    return true
                },
            },
            {
                $elem: $('<span>50%</span>'),
                onClick: (editor, $node) => {
                    $node.attr('width', '50%')
                    $node.removeAttr('height')

                    // 返回 true，表示执行完之后，隐藏 tooltip。否则不隐藏。
                    return true
                },
            },
            {
                $elem: $('<span>100%</span>'),
                onClick: (editor, $node) => {
                    $node.attr('width', '100%')
                    $node.removeAttr('height')

                    // 返回 true，表示执行完之后，隐藏 tooltip。否则不隐藏。
                    return true
                },
            },
            {
                $elem: $(`<span>重置</span>`),
                onClick: (editor, $node) => {
                    $node.removeAttr('width')
                    $node.removeAttr('height')

                    // 返回 true，表示执行完之后，隐藏 tooltip。否则不隐藏。
                    return true
                },
            }
        ]


        if ($node.attr('data-href')) {
            conf.push({
                $elem: $(`<span>查看链接</span>`),
                onClick: (editor, $node) => {
                    let link = $node.attr('data-href')
                    if (link) {
                        link = decodeURIComponent(link)
                        window.open(link, '_target')
                    }
                    // 返回 true，表示执行完之后，隐藏 tooltip。否则不隐藏。
                    return true
                },
            })
        }

        console.error("----", conf)

        // 创建 tooltip
        tooltip = new Tooltip(editor, $link, conf)
        tooltip.create()
    }

    /**
     * 隐藏 tooltip
     */
    function hideImageExtendsTooltip() {
        // 移除 tooltip
        if (tooltip) {
            tooltip.remove()
            tooltip = null
        }
    }

    return {
        showImageExtendsTooltip,
        hideImageExtendsTooltip,
    }
}

/**
 * 绑定 tooltip 事件
 * @param editor 编辑器实例
 */
function bindEvent(editor) {
    const {
        showImageExtendsTooltip,
        hideImageExtendsTooltip
    } = createShowHideFn(editor)

    // 图片被点击事件
    editor.txt.eventHooks.imgClickEvents.push(showImageExtendsTooltip)

    // 点击其他地方，或者滚动时，隐藏 tooltip
    editor.txt.eventHooks.clickEvents.push(hideImageExtendsTooltip)
    // 点击链接事件
    editor.txt.eventHooks.linkClickEvents.push(hideImageExtendsTooltip)
    editor.txt.eventHooks.keyupEvents.push(hideImageExtendsTooltip)
    // 菜单栏被点击
    editor.txt.eventHooks.toolbarClickEvents.push(hideImageExtendsTooltip)
    editor.txt.eventHooks.menuClickEvents.push(hideImageExtendsTooltip)
    // 编辑区域滑动事件
    editor.txt.eventHooks.textScrollEvents.push(hideImageExtendsTooltip)
    editor.txt.eventHooks.imgDragBarMouseDownEvents.push(hideImageExtendsTooltip)
    editor.txt.eventHooks.changeEvents.push(hideImageExtendsTooltip)
}
class ImageExtends extends BtnMenu {
    constructor(editor) {
        const $elem = E.$(
            `<div class="w-e-menu" data-title="链接 ">
                <i class="w-e-icon-link"></i>
            </div>`
        )
        super($elem, editor)
            bindEvent(editor)
    }
    // 菜单点击事件
    clickHandler(e) {
        
        console.error("是否选中任何文字）",this.editor.selection.isSelectionEmpty(),this.editor.selection.getSelectionText());
        if(this.editor.selection.isSelectionEmpty()){
            alert("没有选择任何文字")
            return;
        }
        else if(this.editor.selection.getSelectionText()==""){
            alert("没有选择任何文字,图片添加链接时，请直接在图片上操作")
            return;
        }
        Vue.prototype.$vFN.Directives.SelectLink({
            onSuccess: (res) => {
                console.error(res,this.editor.selection.getSelectionContainerElem().elems[0]);
                
                // 用文字，替换链接
                this.editor.cmd.do('insertHTML', '<a data-name="'+res.name+'"  data-path="'+res.path+'"  data-type="'+res.type+'">-'+this.editor.selection.getSelectionText()+'-</a>')
            },

        });
    }
    tryChangeActive() {  
    }
}
export default ImageExtends